<template>
    <a-modal
            :width="800" :destroyOnClose="true" :maskClosable="false"
            :visible="visible" @cancel="handleCancel" :footer="null">
        <a-tabs
                :activeKey="activeKey"
                @change="tabChange"
        >
            <a slot="tabBarExtraContent" class="tabBarExtraContent" href="#">人员姓名：{{staff.name}}</a>
            <a-tab-pane key="1" tab="指纹列表">
                <a-empty description="没有指纹录入数据" v-if="isEmpty"/>
                <div v-else style="background-color: #ececec; padding: 10px;">
                    <a-row :gutter="[16,16]">
                        <a-col :span="12" v-for="(item,index)  in dataSource" :key="index">
                            <a-card :title=" $exMod.findDict(FingerCodeOPT, item.fingerCode)" :bordered="false">
                                <a-popconfirm slot="extra"
                                              title="确定要删除这个指纹吗?"
                                              ok-text="Yes"
                                              cancel-text="No"
                                              @confirm="delFinger(item.id)"
                                >
                                    <a href="#">删除</a>
                                </a-popconfirm>
                                <p>存储路径:{{item.diskPath}}</p>
                                <p :title="item.webUrl">下载地址:{{item.webUrl}}</p>
                                <p>创建时间:{{item.createTime}}</p>
                                <p>创建人:{{item.createOperator}}</p>
                            </a-card>
                        </a-col>
                    </a-row>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="添加指纹" force-render>
                <FingerForm :staffCode="staff.code" @reloadModal="reloadModal"/>
            </a-tab-pane>
        </a-tabs>
        <!-- Modal 页脚 -->
    </a-modal>
</template>
<script>
    import {dictLoad} from '../../../util/internal.api';
    import {delStaffFinger, getStaffFinger, saveStaffFinger} from "../public/http";
    export default {
        props: ["staff"],
        components: {
            FingerForm: resolve => {
                require(['./FingerForm.vue'], resolve);
            }
        },
        data() {
            return {
                isEmpty: true,
                loading: false, //按钮Loading
                title: "指纹管理",
                activeKey: "1",
                dataSource: [],
                visible: true, //modal 显示状态
                FingerCodeOPT: [],
                value: [], //多选选中的项
            };
        },
        methods: {
            //Tab切换
            tabChange(e) {
                this.activeKey = e;
            },
            getList() {
                getStaffFinger(this.staff.code).then(res => {
                    this.dataSource = res.data.result;
                    this.isEmpty = this.dataSource.length <= 0;
                });
            },
            reloadModal(e) {
                this.activeKey = "1"
                this.getList();
                console.log(e);
            },
            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeModal', {
                    render: false
                });
            },
            delFinger(fingerId) {
                console.log(fingerId);
                delStaffFinger(fingerId).then(res => {
                    if (res.code === 0) {
                        this.$notification.success({
                            message: '操作成功',
                            description: res.message
                        });
                        this.getList();
                    }
                });
            },
            //完成监听
            async onSubmit(e) {
                //保存指纹指纹数据
                let data = {keys: this.value.toString()};
                await saveStaffFinger(this.staffCode, data).then(res => {
                    if (res.code === 0) {
                        this.$notification.success({
                            message: '操作成功',
                            description: res.message
                        });
                        //关闭弹窗
                        this.visible = false;
                        this.$emit('closeModal', {render: false});
                    } else {
                        this.$notification.error({
                            message: '操作失败',
                            description: res.message
                        });
                    }
                });
            },
            //获取选择结果
            onChange(checkedValues) {
                this.value = checkedValues;
            },
        },
        created() {
            dictLoad('FingerCode').then(res => (this.FingerCodeOPT = res));
            this.getList();
        }
    };
</script>
<style scoped>
    .tabBarExtraContent {
        margin-right: 3rem
    }
    p {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>